<template>
  <el-popover
    popper-class="tree-select"
    trigger="click"
    :width="poperWidth"
    v-model="poperShow"
    @show="onShow"
    @after-leave="afterLeave"
  >
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
    <el-scrollbar wrapClass="scrollbar-wrapper" ref="tree-select-scroll">
      <el-tree
        ref="select-tree"
        :data="treeData"
        :node-key="nodeKey"
        :props="treeDefaultProps"
        :filter-node-method="filterNode"
        :expand-on-click-node="expandOnClickNode"
        :highlight-current="highlightCurrent"
        :current-node-key="currentNodeKey"
        :default-expanded-keys="defaultExpandedKeys"
        @node-click="onNodeClick"
      ></el-tree>
    </el-scrollbar>
    <el-input
      ref="outer-el"
      v-model="selectedTreeNodeName"
      :readonly="true"
      slot="reference"
      :suffix-icon="suffixIcon"
    ></el-input>
  </el-popover>
</template>
<script>
import { matchTreeItem } from "@/utils";
export default {
  name: "TreeSelect",
  props: {
    treeData: {
      type: Array,
      required: true,
    },
    nodeKey: String,
    treeDefaultProps: {
      type: Object,
      default: {
        children: "chilren",
        label: "label",
      },
    },
    expandOnClickNode: {
      type: Boolean,
      default: false,
    },
    highlightCurrent: {
      type: Boolean,
      default: false,
    },
    currentNodeKey: [String, Number],
    defaultExpandedKeys: {
      type: Array,
      default() {
        return new Array();
      },
    },
  },
  data() {
    return {
      poperWidth: null,
      poperShow: false,
      filterText: "",
    };
  },
  computed: {
    selectedTreeNodeName() {
      let node = matchTreeItem(
        this.treeData,
        this.treeDefaultProps.children,
        this.nodeKey,
        this.currentNodeKey
      );
      return node ? node[this.treeDefaultProps.label] : "";
    },
    suffixIcon() {
      return this.poperShow ? "el-icon-arrow-up" : "el-icon-arrow-down";
    },
  },
  watch: {
    filterText(value) {
      this.$refs["select-tree"].filter(value);
    },
  },
  methods: {
    filterNode(value, data) {
      return data[this.treeDefaultProps.label]
        .toLowerCase()
        .includes(value.toLowerCase());
    },
    onNodeClick(data, nodeData, node) {
      this.$emit("onSelect", data, nodeData, node);
      this.afterLeave();
    },
    onShow() {
      this.poperShow = true;
      this.poperWidth = this.$refs["outer-el"].$el.offsetWidth;
      this.scrollToCurrentNode();
    },
    scrollToCurrentNode: function () {
      this.$nextTick(() => {
        // 获取当前节点
        let currentNodeEl = document.querySelector(".tree-select .is-current");
        this.$refs["tree-select-scroll"].wrap.scrollTop =
          currentNodeEl.offsetTop / 2;
      });
    },
    afterLeave() {
      this.poperShow = false;
    },
  },
  mounted() {},
};
</script>
<style lang="scss">
.tree-select {
  .el-scrollbar {
    height: 200px;
  }
  .scrollbar-wrapper {
    height: 100%;
    overflow-x: hidden !important;
  }
  .el-tree {
    .el-tree-node__content {
      display: block;
    }
    .el-tree-node__children {
      overflow: visible !important;
    }
  }
}
</style>
